class LoadExternalScript {
  static DYNAMICS_LOAD_SCRIPT  = {}
}
export const phaserUtils = {
  data() {
    return {
    }
  },
  props: ['item'],
  created(){
    if(!this.isH5Edit && !window.Phaser){
      this.dynamicsLoadScript(this.env.baseUrl + 'js/phaser/phaser.min.js?v=1', 'Phaser', this.initPhaser)
    }
  },
  computed: {
    commonAttr(){
      return this.item.commonAttr;
    },
    styles(){
      let styles_ = _.cloneDeep(this.item.styles);
      return styles_
    }
  },
  mounted(){
    this.initPhaser(window.Phaser)
  },
  methods: {
    initPhaser(Phaser){
      if(!Phaser){
        return
      }
    },
    updateShape(){
    },

    dynamicsLoadScript (url, attr, cb, groupId) {
      let attrs = attr.split(".")
      let attr_ = ''
      if(attrs.length > 1){
        attr_ = attrs[0]
        if(window[attrs[0]] && window[attrs[0]][attrs[1]]){
          if(cb){
            cb(window[attr_]);
          }
          return;
        }
      }else{
        attr_ = attr
        if(window[attr]){
          if(cb){
            cb(window[attr_]);
          }
          return;
        }
      }
      let dynamicsScript = LoadExternalScript.DYNAMICS_LOAD_SCRIPT
      if(!dynamicsScript[attr]){
        dynamicsScript[attr] = { isLoading: false,  cbs: [], groupId}
      }
      if(dynamicsScript[attr].isLoading){
        if(cb){
          dynamicsScript[attr].cbs.push(cb)
        }
      }else{
        if(cb){
          dynamicsScript[attr].cbs.push(cb);
        }
        dynamicsScript[attr].isLoading = true;
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.charset = "utf-8";
        script.src = url;
        script.onload = script.onreadystatechange = function() {
          if (
            !this.readyState || //这是FF的判断语句，因为ff下没有readyState这人值，IE的readyState肯定有值
            this.readyState == "loaded" ||
            this.readyState == "complete" // 这是IE的判断语句
          ) {
            let cbs;
            let groupId_ = dynamicsScript[attr].groupId;
            let isCallback = false;
            if(groupId_){
              cbs = dynamicsScript[groupId_].cbs;
              dynamicsScript[groupId_].currentNum++;
              delete dynamicsScript[attr].groupId;
              if(dynamicsScript[groupId_].currentNum >= dynamicsScript[groupId_].totalNum){
                isCallback = true
              }
            }else{
              cbs = dynamicsScript[attr].cbs;
              isCallback = true
            }
            if(isCallback && cbs.length > 0){
              _.forEach(cbs, (cb) => {
                if(cb){
                  if(!window[attr]){
                    window[attr] = attr
                  }
                  cb(window[attr_]);
                }
              })
            }
          }
        };
        document.body.appendChild(script);
      }
    },
    dynamicsLoadScripts (urls, attrs, cb) {
      let groupId = attrs[0] + "_Group_Id_" +  _.random(0, 50);
      let dynamicsScript = LoadExternalScript.DYNAMICS_LOAD_SCRIPT

      if(!dynamicsScript[groupId]){
        dynamicsScript[groupId] = { currentNum: 0, totalNum: urls.length, cbs: [cb] }
      }
      _.forEach(urls, (url, i) => {
        let attr = attrs[i]
        this.dynamicsLoadScript(url, attr, cb, groupId)
      })
    },
  },
  updated(){
    this.updateShape()
  },
  watch: {
    'item.commonAttr': {
      deep: true,
      handler() {
        this.updateShape()
      }
    }
  }
}


